<template>
  <el-form label-position="top" :model="form" :rules="rules" ref="form" class="part-apply-out-stock-form">
    <el-form-item :label="`${$t('common.form.preview.relatedPart.approver')}:`">
      <el-input type="text" placeholder="" :value="formdata.propserName" readonly></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('task.detail.components.applyTime')}`">
      <el-input type="text" placeholder="" :value="formdata.propserTime" readonly></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('part.field17')}:`">
      <el-input type="text" placeholder="" :value="partCount" readonly></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('common.fields.partName.displayName')}:`">
      <el-input type="text" placeholder="" :value="formdata.sparepartRepertory&&formdata.sparepartRepertory.sparepart&&formdata.sparepartRepertory.sparepart.name" readonly></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('common.paas.model.sparePartField.sparePartNo')}:`">
      <el-input type="text" placeholder="" :value="formdata.sparepartRepertory&&formdata.sparepartRepertory.sparepart&&formdata.sparepartRepertory.sparepart.serialNumber" readonly></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('common.label.sparepartType')}:`">
      <el-input type="text" placeholder="" :value="formdata.sparepartRepertory&&formdata.sparepartRepertory.sparepart&&formdata.sparepartRepertory.sparepart.type" readonly></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('common.label.sparepartStandard')}:`">
      <el-input type="text" placeholder="" :value="formdata.sparepartRepertory&&formdata.sparepartRepertory.sparepart&&formdata.sparepartRepertory.sparepart.standard" readonly></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('common.base.warehouse')}:`">
      <el-input type="text" placeholder="" :value="formdata.sparepartRepertory&&formdata.sparepartRepertory.repertory&&formdata.sparepartRepertory.repertory.name" readonly></el-input>
    </el-form-item>
    <!-- <el-form-item label="安全库存:">
      <el-input type="text" placeholder="" :value="formdata.sparepartRepertory&&formdata.sparepartRepertory.safetyStock || ''" readonly></el-input>
    </el-form-item> -->
    <el-form-item :label="`${$t('part.field9')}:`" style="position: relative">
      <el-input type="text" placeholder="" :value="formdata.sparepartRepertory.repertoryCount" readonly></el-input>
      <el-tooltip class="item" effect="dark" :content="`${$t('part.text9')}：${formdata.sparepartRepertory.safetyStock}`" placement="top">
        <el-tag v-if="formdata.sparepartRepertory.safetyStock && (formdata.sparepartRepertory.safetyStock > formdata.sparepartRepertory.repertoryCount)" size="mini" type="danger" class="tag-position">{{ $t('part.components.partStock.text2') }}</el-tag>
      </el-tooltip>
    </el-form-item>
    <el-form-item :label="`${$t('part.field12')}:`">
      <el-input type="text" placeholder="" :value="variationNum()" readonly></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('part.field18')}:`" prop="number">
      <el-input v-model="form.number" type="number" step="any" :min="0" :max="variationNum()"></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('common.form.type.currency')}:`">
      <span>{{$t('part.field19')}}：{{saleTotalPrice}}</span>
      <span v-if="initData.auths.VIP_SPAREPART_VIEW && initData.auths.VIP_SPAREPART_EDIT" style="display: inline-block; margin-left: 30px">{{$t('part.field20')}}：{{costTotalPrice}}</span>
    </el-form-item>
    <el-form-item :label="`${$t('common.base.remark')}:`" prop="remark">
      <el-input v-model="form.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" :maxlength="500"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
import MathUtil from '@src/util/math';
import { t } from '@src/locales'

export default {
  name: 'part-outstock-form',
  inject: ['initData'],
  props: {
    formdata: {
      type: Object,
      default: () => ({})
    },
    sparepartConfig: {
      type: Object,
      default: () => ({})
    },
    initData: {
      type: Object,
      default: () => ({})
    }
  },
  data(){
    const _that = this;
    return {
      form: {
        type: this.formdata.type,
        number: this.variationNum() || 0,
        remark:'',
      },
      numberValidateForm: {
        number: ''
      },
      partCount: `${t('part.text12')}：${this.formdata.holdCount || 0}
      ${t('part.text13')}：${this.formdata.holdCountSum || 0}
       `,
      rules: {
        remark: [
          {required: true, message: t('common.base.tip.inputCommentContent'), trigger: 'blur'},
          {max: 500, message: t('part.components.partRemarkForm.text2', {max:500})}
        ],
        number:[
          {
            validator(rule, value, callback) {
              const val = Number(value);
              const count = _that.decimalNumber(val);
              if (value == '' || val < 0) {
                callback(new Error(t('part.tips22')))
              } else if (val > Number(_that.variationNum())) {
                callback(new Error(t('part.tips34')))
              } else if (count != -1 && count == 0) {
                callback(new Error(t('part.tips23', {num:0})));
              } else if (count != -1 && count != 0) {
                callback(new Error(t('part.tips24', {num1:0, num2:count})))
              } else {
                callback();
              }
            },
            trigger: 'change',
          }
        ],
      }
    }
  },
  computed: {
    saleTotalPrice () {
      if(!this.formdata.sparepartRepertory.sparepart.salePrice || !this.form.number) return 0;
      let price = this.$math.format(this.$math.multiply(this.$math.bignumber(this.form.number), this.$math.bignumber(this.formdata.sparepartRepertory.sparepart.salePrice)));
      return Number(price).toFixed(2);
    },
    costTotalPrice () {
      if(!this.formdata.sparepartRepertory.sparepart.costPrice || !this.form.number) return 0;
      let price = this.$math.format(this.$math.multiply(this.$math.bignumber(this.form.number), this.$math.bignumber(this.formdata.sparepartRepertory.sparepart.costPrice)));
      return Number(price).toFixed(2);
    },
    // TODO: 支持小数 提示
    minNumber () {
      let initData = this.initData;
      return !initData || !initData.precision ? 1 : (initData.precision == 1 ? 0.1 : 0.01);
    },
  },
  methods: {
    
    async pack(){
      if(this.form.number <= 0){
        this.$platform.alert(t('part.tips38'))
        return
      }
      if(this.form.number > Number(this.variationNum())){
        this.$platform.alert(t('part.tips39'));
        return
      }
      try {
        let isSucc = await this.$refs.form.validate();
        if(isSucc){
          return {
            id:this.formdata.id,
            solvedVariation:this.form.number,
            type: this.form.type,
            remark: this.form.remark
          }
        }
      } catch (error) {
        console.log(error)
      }

      return null;

    },
    decimalNumber(num) {
      let initData = this.initData;
      let count = MathUtil.decimalNumber(num);
      let isPartV2 = initData.isSparepart2;

      if(!isPartV2 && count != 0) return 0;
      if(initData.precision >= count) return -1;
      return initData.precision;
    },
    variationNum () {
      return this.$math.format(this.$math.subtract(this.$math.bignumber(this.formdata.variation), this.$math.bignumber(this.formdata.solvedVariation)))
    }

  },
}
</script>

<style lang="scss">
.el-form-item{
  margin-bottom: 0
}
.el-form-item__error{
  position: relative;
}
#outType{
  width: 100%;
  height: 34px;
}
.part-apply-out-stock-form {
  .tag-position {
    position: absolute;
    top: 50%;
    right: 0px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}
</style>